<style>
  .active{
    background-color: lightblue;
}
</style>
<script>
    //声明全局变量
    var baseUrl='http://47.94.229.139:7788/';
    var currentPage=1;
	  var pageSize=10;
    var id;
    //通过promise封装请求函数
    function getData(type,url){
      var p=new Promise((resolve,reject)=>{
        //执行异步请求
        $.ajax({
          url:url,
          type:type,
          headers:{
            "Authorization":sessionStorage.getItem('token'),
          },
          success:function(data){
            resolve(data);
          }
        })
      })
      return p;
    }
    //1.发送请求--请求角色信息
    getData('get',baseUrl+'role/findAll').then(function(data){
      console.log(data);
      //数据处理
      data.data.forEach((item)=>{
          $('.user_container .val').after(`<option>`+item.name+`</option>`);
      });
    });
    //封装数据处理函数
    function getUserData(url){
      //2.请求所有用户数据-根据分页
       return getData('get',baseUrl+url).then(function(data){
        //console.log(data);
        //清空所有分页按钮
        if($(".clicknum").length>0){
          $(".clicknum").remove();
        }
        //根据用户总量设置分页按钮
        var num=Math.ceil((data.data.total)/pageSize);
        for(var i=num;i>0;i--){
          $('.user_container .disabled').after(`<li class='clicknum'><span>`+(i)+`</span></li>`);
        }
        $(' li').click(function(){
          //给当前分页按钮添加样式
          $(this).addClass("active").siblings().removeClass("active");
        });
        //给分页按钮绑定事件
        $('.clicknum').click((event)=>{ 
          currentPage=$(event.target).text();
          getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize);
        });
        //先清空所有tbody元素
        $(".user_container tbody").empty();
        //根据用户数量创建tr-》追加tbody
        data.data.list.forEach((item)=>{
          $(".user_container tbody").append(`<tr style="text-align: left;">
              <td>`+item.id+`</td>
              <td>`+item.username+`</td>
              <td>`+item.realname+`</td>
              <td>`+item.politicsStatus+`</td>
              <td>`+item.gender+`</td>
              <td>`+item.status+`</td>
              <td>`+item.telephone+`</td>
              <td>
                <span data-toggle="modal" data-target=".szmd" class='set'>设置</span>
                <span class="deleteById">移除</span>
                <span class='detil'>详情</span>
                <span data-toggle="modal" data-target="#exampleModal" class='edit'>修改</span>
              </td>
              </tr>`);
        });
      })
    }
    getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize);
    //给移除按钮绑定事件
    $('.user_container tbody').on('click','.deleteById',(event)=>{
      id=$(event.target).parent().parent().children().eq(0).text();
      //console.log(id);
      //删除当前行
      if (confirm("是否确定删除当前行")){
        getData('get',baseUrl+'baseUser/deleteById?id='+id).then((res)=>{
            alert('删除成功');
              //清空所有tr
              $("tbody").empty();
              //3.刷新页面
              getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize);
          
          
        })
      }
	  })
    //给搜索按钮绑定事件
    $(".user_container .btn-link").click(()=>{
      console.log($(".user_container .btn-link"))
      //1.获取用户数据
      var username=$(".user_search_text").eq(0).val();
      var rolename=$(".user_search_text").eq(1).val();
      //2.判断用户输入
      if(username!='' && rolename=='请选择角色'){
        url='baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&username='+username;
      }else if(username=='' && rolename!='请选择角色'){
        url='baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&rolename='+rolename;
      }else if(username!='' && rolename!="请选择角色"){
        url='baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&username='+username+'&rolename='+rolename;
      }else{
        url='baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize;
      }
      //3.发送请求
      getUserData(url);
    });
    //给详情按钮绑定事件
    $('.user_container tbody').on('click','.detil',(event)=>{
      $('.content-main').load('./pages/user.html');
    })
    //给设置按钮绑定事件
    $('.user_container tbody').on('click','.set',(event)=>{
      id=$(event.target).parent().parent().children().eq(0).text();
      //console.log(id)
      getData('get',baseUrl+'baseUser/findAll').then(function(data){
        //console.log(data);
        data.data.forEach((item)=>{
         //console.log(item.id)
         if(item.id==id){
           $('.flag').val(item.username);
           //$('.checkbox-inline').
         }
      });
      })
    })
    $('.add').click(function(){
      $("#username").val('');
      $("#realname").val('');
      $('#password').val('');
      $("#gender").val('');
      $('#telephone').val('');
      $('#birth').val('');
    })
   // 给添加按钮绑定事件
    console.log($('.addOk'))
    $('.user_container .addOk').click(function(){
      var username=$('.user_container #username').val();
      var realname=$('.user_container #realname').val();
      var password=$('.user_container #password').val();
      //var gender=$('#gender').val();
      var radios=$('.user_container .gender');
      // console.log(radios)
      var gender;
      for(var i=0;i<radios.length;i++){
        if(radios[i].checked){
          gender=radios[i].value
        }
      }
      //console.log(gender)
       var telephone=$('#telephone').val();
        var birth=$('#birth').val();
        if(id){
          var user={
            id:id,
            username:username,
            realname:realname,
            password:password,
            gender:gender,
            telephone:telephone,
            birth:birth,
          }
        }else{
          var user={
            username:username,
            realname:realname,
            password:password,
            gender:gender,
            telephone:telephone,
            birth:birth,
          }
        }
        //发送ajax请求，将数据更新到后台
        $.ajax({
          type:'POST',
          url:baseUrl+'baseUser/saveOrUpdate',
          headers:{
              "Authorization":sessionStorage.getItem("token")
          },
          data:user,
          success:function(data){
            // 关闭模态框
            $("#exampleModal").modal("hide")
            // 重新查询栏目信息
            $('.user_container tbody').empty();
            getUserData('/baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize);
          }
        })
     })
    //查询所有用户信息
      var users;
      $.ajax({
        type:'GET',
        url:baseUrl+'baseUser/findAll',
        headers:{
            "Authorization":sessionStorage.getItem("token")
        },
        success:function(data){
          //console.log(data)
          users=data.data;
          //console.log(users);
        }
      }) 
    //给修改按钮绑定事件
    $('.user_container tbody').on('click','.edit',function(event){
      id=$(event.target).parent().parent().children().eq(0).text();
      //console.log(id)
      var edit=users.filter(function(item){
        if(item.id==id){
          $('#id').val(item.id);
          $('#username').val(item.username);
          $('#realname').val(item.realname);
          $('#password').val(item.password);
          $('#gender').val(item.gender)
          $('#telephone').val(item.telephone)
          $('#birth').val(item.birth)
        }
       })  
    })
    
    

    
   
    

  
</script>
<div class="user_container">
    <div class="row">
      <div class="col-md-1"><button type="button" class="btn btn-info add" data-toggle="modal" data-target="#exampleModal">添加</button></div>
      <div class="col-md-2"><input type="text" class="form-control user_search_text" placeholder="请输入用户名" aria-describedby="basic-addon1" width="50px"></div>
      <div class="col-md-2">  
          <select class="form-control user_search_text">
            <option class="val">请选择角色</option>
          </select>  
      </div>
      
      <div class="col-md-1"><button type="button" class="btn btn-link">搜索</button></div>
    </div>
    <table class="table" >
      <thead >
        
            <th >序号</th>
            <th>用户名</th>
            <th >姓名</th>
            <th >角色</th>
            <th >性别</th>
            <th >状态</th>
            <th >手机号</th>
            <th>操作</th>
        
      </thead>
        <tbody>
          <!-- <tr style="text-align: left;" >
            <td>1</td>
            <td>guoguo</td>
            <td>果果</td>
            <td>教师</td>
            <td>女</td>
            <td>正常</td>
            <td>123</td>
            <td>设置 移除 详情 修改</td>
          </tr> -->
        </tbody>
    </table>
      
    

    <div>
      <nav aria-label="...">
        <ul class="pagination">
          <li class="disabled">
            <span>
              <span aria-hidden="true">&laquo;</span>
            </span>
          </li>
          <!-- <li >
            <span>1 <span class="sr-only">(current)</span></span>
          </li>
          <li >
            <span>2 <span class="sr-only">(current)</span></span>
          </li>
          <li >
            <span>3 <span class="sr-only">(current)</span></span>
          </li>
          <li >
            <span>4 <span class="sr-only">(current)</span></span>
          </li> -->
          <li>
            <a href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  <!--模态框使用-->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">添加用户信息</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
          <div class="col-sm-10">
          <input type="text" class="form-control" id="username" placeholder="用户名" >
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">姓名</label>
          <div class="col-sm-10">
          <input type="text" class="form-control" id="realname" placeholder="name">
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
          <div class="col-sm-10">
          <input type="password" class="form-control" id="password" placeholder="Password">
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
          <div class="col-sm-10">
          <div class="radio ">
          <label>
            <input type="radio" name="optionsRadios" class="gender" value="男" checked >男
          </label> &nbsp;&nbsp;
          <label>
            <input type="radio" name="optionsRadios" class="gender" value="女">
            女
          </label>
          </div>
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">手机号</label>
          <div class="col-sm-10">
          <input type="number" class="form-control" id="telephone" placeholder="tel">
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">生日</label>
          <div class="col-sm-10">
          <input type="number" class="form-control" id="birth" placeholder="date">
          </div>
        </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-default addOk " >确定</button>
      </div>
      </div>
    </div>
  </div>
    <!--模态框结束-->
    <!--设置模态框-->
    <div class="modal fade szmd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="exampleModalLabel">设置角色</h4>
    </div>
    <div class="modal-body">
      <form class="form-horizontal">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-10">
        <input type="email" class="form-control flag" id="inputEmail3" placeholder="用户名" readonly value="">
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">角色</label>
        <div class="col-sm-10">
          <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox1" value="option1"> 学生
          </label>
          <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox2" value="option2"> 管理员
          </label>
          <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox3" value="option3"> 教师
          </label>
        </div>
        
      </div>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      <button type="button" class="btn btn-default">确定</button>
    </div>
    </div>
  </div>
  </div>
    <!--设置模态框结束-->
  </div>
</div>